<template>
	<view class="container">


		<view class="top">
			<uni-forms ref="baseForm" :modelValue="baseFormData">

				<view class="form-row"> <uni-forms-item label="状态"> <uni-data-select v-model="baseFormData.status"
							:localdata="range"></uni-data-select> </uni-forms-item> <uni-forms-item label="维修方式">
						<uni-data-select v-model="baseFormData.method" :localdata="range"></uni-data-select>
					</uni-forms-item> </view>


			</uni-forms>
		</view>

		<text>共3条</text>
		<view class="order-item" v-for="order in orders" :key="order.id">

			<view class="order-details">
				<text class="detail-text">维修信号 : {{ order.id }} </text>
				<text class="detail-text">维修方式 : {{ order.method }}</text>
				<text>预约日期 : {{ order.date }} {{ order.time }}</text>
			</view>


			<view class="right">
				<text :class="{'detail-text2': order.status !== '已完成', 'detail-text-special': order.status === '已完成'}">
					{{ order.status }} </text>
				<button class="details-button" @click="goTodetail">查看详情</button>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseFormData: {},
				range: [{
					text: '选项1',
					value: 0
				}, {
					text: '选项2',
					value: 1
				}],
				orders: [{
						id: '3535252',
						status: '进行中',
						method: '到店维修',
						date: '2022/11/10',
						time: '11:00'
					},
					{
						id: '3535253',
						status: '已完成',
						method: '上门取车',
						date: '2022/11/10',
						time: '11:00'
					},
					{
						id: '3535254',
						status: '进行中',
						method: '上门取车',
						date: '2022/11/10',
						time: '11:00'
					}
				]
			};
		},
		methods: {
			goTodetail() {
				uni.navigateTo({
					// url: listItem.page
					url: '/pages/maintain/detail/detail'
				})
				// this.$router.push('/pages/maintain/detail/detail')
			}
		}

	};
</script>

<style>
	.container {
		padding: 20px;
	}

	.order-item {
		border: 1px solid #ccc;
		border-radius: 4px;
		padding: 10px;
		margin-bottom: 10px;
		margin-top: 10px;
		display: flex;
		justify-content: space-between;
	}


	.order-details {
		margin-bottom: 10px;
		display: flex;
		flex-direction: column;
	}

	.detail-text {
		margin-bottom: 5px;
	}

	.detail-text2 {
		margin-bottom: 20px;
		color: #357EFF;
	}

	.detail-text-special {
		margin-bottom: 20px;
		color: #A9A9A9;
	}

	.right {
		margin-bottom: 10px;
		display: flex;
		flex-direction: column;
	}

	.details-button {
		/* padding: 10px; */
		background-color: #557AD6;
		color: #fff;
		border: none;
		border-radius: 4px;
		width: 100%;
		font-size: 20rpx;
	}

	.form-row {
		display: flex;
		justify-content: space-between;
	}

	.uni-forms-item {
		flex: 1;
		margin-right: 10px;
	}

	.uni-forms-item:last-child {
		margin-right: 0;
	}
</style>